input框校验：小数点保留两位，只能输入0--100

最新推荐文章于 2024-04-17 18:49:35 发布

想搞全栈的前端

最新推荐文章于 2024-04-17 18:49:35 发布

阅读量3.6k

点赞数 3

分类专栏： jQuery 文章标签： input 校验保留两位小数

本文链接：https://blog.csdn.net/qq_42068550/article/details/115398874

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客分享了三种JavaScript实现的输入值校验方法，主要用于确保输入值为0或正数，且最多保留两位小数。第一种方法使用keyup事件实时校验，第二种方法针对百分比校验，第三种方法是在Vue中进行数据校验。这些方法通过正则表达式清除非法字符，限制小数位数，并处理首位不能为0的特殊情形。

摘要由CSDN通过智能技术生成

input输入值校验

第一种

$('input').keyup(function(){
		var value = $(this).val()
		var sum = 0;
		// 清除"数字"和"."以外的字符
	    value = value.replace(/[^\d.]/g,"");
	    // 验证第一个字符是数字
	    value = value.replace(/^\./g,"");
	    // 只保留第一个, 清除多余的
	    value = value.replace(/\.{2,}/g,".");
	    value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
	    // 只能输入两个小数
	    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
	    value>100?value=100:''
	    value<0?value=0:''
		$(this).val(value)
	})

第二种

/* 百分比校验：数字校验只能输入两位小数 */
	function checkPer(e) {
		$(e).val($(e).val().replace(/[^\d.]/g, "")) //清除“数字”和“.”以外的字符
		$(e).val($(e).val().replace(/^\./g,""));//验证第一个字符是数字而不是
		$(e).val($(e).val().replace(/\.{2,}/g, ".")) //只保留第一个. 清除多余的
		$(e).val($(e).val().replace(".", "$#$").replace(/\./g, "").replace("$#$", "."))
		$(e).val($(e).val().replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))//只能输入两个小数
	    if ($(e).val().indexOf(".") < 0 && $(e).val() != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
	   	 $(e).val(parseFloat($(e).val()))
	 	}
	    if(Number($(e).val())>100){$(e).val(100)}
    }

VUE

// 数字校验 0或正数；保留两位小数
  public checkNum(index:any,prop?:any){
  // 格式化限制数字文本框输入，只能数字或者两位小数
    // 清除"数字"和"."以外的字符
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/[^\d.]/g,"");
    // 验证第一个字符是数字
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/^\./g,"");
    // 只保留第一个, 清除多余的
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/\.{2,}/g,".");
    (this.$refs.tableProp as any).tableDataObj[index][prop] = (this.$refs.tableProp as any).tableDataObj[index][prop].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    // 只能输入两个小数
    (this.$refs.tableProp as any).tableDataObj[index][prop]= (this.$refs.tableProp as any).tableDataObj[index][prop].replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
 
    //如果有小数点，不能为类似 1.10的金额  
    if((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".")> 0  && (this.$refs.tableProp as any).tableDataObj[index][prop].indexOf("0")>2){
      (this.$refs.tableProp as any).tableDataObj[index][prop]= parseFloat((this.$refs.tableProp as any).tableDataObj[index].ratio); 
    }
    //如果有小数点，不能为类似 0.00的金额 
    if((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".")> 0  && (this.$refs.tableProp as any).tableDataObj[index][prop].lastIndexOf("0")>2){
      (this.$refs.tableProp as any).tableDataObj[index][prop]= parseFloat((this.$refs.tableProp as any).tableDataObj[index][prop]); 
    } 
     //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
    if ((this.$refs.tableProp as any).tableDataObj[index][prop].indexOf(".") <= 0 && (this.$refs.tableProp as any).tableDataObj[index][prop] != "") {
      (this.$refs.tableProp as any).tableDataObj[index][prop] = parseFloat((this.$refs.tableProp as any).tableDataObj[index][prop]);
    }
  }```